<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style type="text/css">
        /*这是和响应式布局相关的样式设置：媒体查询
        意思是：针对不同的显示终端的显示屏宽度的不同，同一段代码显示的样式对应不同，从而达到正常的效果
        其中下面：第一个@media (min-width: 700px)设置  表示当显示屏宽度大于等于700px时，背景色设置被绿色
                   第一个@media (min-width: 1000px)设置  表示当显示屏宽度大于等于1000px时，背景色设置被红色
        */
        @media (min-width: 700px) {
            .mm{
                background: green;
            }
        }
        @media (min-width: 1000px) {
            .mm{
                background: red;
            }
        }
    </style>
</head>
<body>
    <!--栅格系统布局-->
    <!--container-fluid代表这个div是一个布局容器，每行满屏（即每一行宽度都和显示屏宽度一样）
        还有一个容器是container  这个是每行宽度不顶满屏幕  两侧有留白
    -->
    <div class="container-fluid">
        <!--row表示这是栅格系统布局中的一行
            注：行内的直接子元素只能是列（coloum）  或者什么都没有
        -->
        <div class="row" style="width: 100px"></div>
        <div class="row">
            <!--rcol表示这是栅格系统布局中的一列  列中才是写自己想要的内容
            注：列有四种表达方式col-log-数字  col-md-数字  col-sm-数字  col-xs-数字（数字代表该列所占的宽度比例）
            注：每一行的宽度被默认分为12份，此行中的所有列所占“份数”之和不能大于12
                若大于12，会破坏布局，可能会将其中的列“挤”到下一行
        -->
            <div class="col-lg-offset-2 col-lg-6 mm">
                张三，占一行的6份，前面留白2份
            </div>
            <div class="col-md-1">李四，此列占1份</div>
            <div class="col-sm-1">王五，此列占1份</div>
            <div class="col-xs-1">赵六，此列占1份</div>
        </div>
    </div>
</body>
</html>